<template>
    <div>
        <el-dialog title="接警人管理" :visible.sync="dialogVisible" width="500px" :before-close="closeEditDialog"
            :close-on-click-modal="false" :append-to-body="true">
            <el-form :model="alarmReceiveInfo" :rules="rules" ref="refSetInfo" label-width="100px">
                <el-form-item size="small" label="姓名" prop="name">
                    <el-input clearable v-model.trim="alarmReceiveInfo.name"></el-input>
                </el-form-item>
                <el-form-item size="small" label="通知方式" prop="notifyType">
                    <el-checkbox-group v-model="alarmReceiveInfo.notifyType">
                        <el-checkbox label="公众号"></el-checkbox>
                        <el-checkbox label="电话"></el-checkbox>
                        <el-checkbox label="短信"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item size="small" label="关联安装点" prop="address">
                    <el-input type="input" placeholder="关联安装点" maxlength="30" v-model.trim="alarmReceiveInfo.address">
                    </el-input>
                </el-form-item>
                <el-form-item size="small" label="手机号" prop="mobile">
                    <el-input type="input" placeholder="接警人管理手机号" maxlength="11" v-model.trim="alarmReceiveInfo.mobile">
                    </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="closeEditDialog" class="cancel-button">取 消</el-button>
                <el-button size="small" @click="editSubmit" class="confirm-button">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "add",
        data() {
            return {
                dialogVisible: false,
                alarmReceiveInfo: {
                    name: '',
                    type: '',
                    notifyType: ["公众号", "短信"],
                    address: '',
                    mobile: ''
                },
                // 表单验证规则
                rules: {
                    name: [{
                        required: true,
                        message: "请输入接警人管理姓名",
                        trigger: "blur"
                    }]
                },
            };
        },
        methods: {
            openMap() {
                this.isShowMap = true
            },
            // 点击修改
            editSubmit() {
                this.$refs.refSetInfo.validate(async (valid) => {
                    if (valid) {

                    }
                });
            },
            // 点击关闭弹框
            closeEditDialog() {
                this.$refs.refSetInfo.resetFields();
                this.dialogVisible = false;
            },
        },
    };
</script>

<style lang="less" scoped>
    @import url("../../common.less");
</style>